import { useState } from "react";
import { View,Image as Img } from "@tarojs/components";
import { Form, Input, Button, Uploader, Image } from "@nutui/nutui-react-taro";
import demoIcon from "../imgs/1111.png";
import cooperation from "../imgs/cooperation.png";
import evaluate from "../imgs/evaluate.png";
import caseIcon from "../imgs/case.png";
import Classroom from "../imgs/Classroom.png";
import help from "../imgs/help.png";
import setIcon from "../imgs/set.png";
import healthy from "../imgs/healthy.jpg";
import homePage from "../imgs/homePage.png";
import management from "../imgs/management.png";
import my from "../imgs/my.png";
import eye from "../imgs/eye.png";

import "./index.scss";
const administrationList = [
  {
    title: "我的合作",
    icon: cooperation,
  },
  {
    title: "评价管理",
    icon: evaluate,
  },
  {
    title: "服务管理",
    icon: setIcon,
  },
  {
    title: "案例收藏",
    icon: caseIcon,
  },
  {
    title: "课堂教学",
    icon: Classroom,
  },
  {
    title: "帮助中心",
    icon: help,
  },
];
function BloggerCollab() {
  const [creareData, setCreareData] = useState({
    open: false,
    data: {
      userName: "那豆",
      pending: 100,
      inProgress: 100,
      completed: 100,
      monthlyIncome: 100,
      totalIncome: 100,
      uploadUrl: "",
    },
  });

  console.log(creareData?.data, "2323232");

  const [uploadUrl, setUploadUrl] = useState();
  const beforeUpload = (file) => {
    const url = file?.[0]?.tempFilePath;
    setUploadUrl(url);
    return url;
  };

  const onFinish = (values) => {
    setCreareData({
      open: true,
      data: {
        ...values,
        uploadUrl: uploadUrl,
      },
    });
  };

  return (
    <View className="blogger_collab">
      <View
        className="blogger_form"
        style={{ display: creareData?.open ? "none" : "block" }}
      >
        <Form
          labelPosition="left"
          onFinish={onFinish}
          footer={
            <>
              <Button nativeType="submit" block type="primary">
                提交
              </Button>
            </>
          }
        >
          <View className="bill">账号信息</View>
          <Form.Item
            label="博主名称"
            name="userName"
            rules={[{ required: true, message: "请输入博主名称" }]}
          >
            <Input />
          </Form.Item>
          <View className="bill">工作台 订单信息</View>
          <Form.Item
            label="待接受"
            name="pending"
            rules={[{ required: true, message: "请输入待接受" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="进行中"
            name="inProgress"
            rules={[{ required: true, message: "请输入进行中" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="已完成"
            name="completed"
            rules={[{ required: true, message: "请输入已完成" }]}
          >
            <Input />
          </Form.Item>
          <View className="bill">工作台 订单信息</View>
          <Form.Item
            label="当月现金收入"
            name="monthlyIncome"
            rules={[{ required: true, message: "请输入当月收入" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="总现金收入"
            name="totalIncome"
            rules={[{ required: true, message: "请输入当月收入" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item label="博主头像">
            <Uploader beforeUpload={beforeUpload} url={uploadUrl} />
          </Form.Item>
        </Form>
        <View>
          博主头像:
          <Image className="user_img" src={uploadUrl}></Image>
        </View>
      </View>
      <View
        className="blogger_blogger"
        style={{ display: !creareData?.open ? "none" : "block" }}
      >
        <View className="blogger_content">
          <View className="blogger_user">
            <View className="user_left">
              <View className="left-img">
                <View className="img">
                  <Image src={creareData?.data?.uploadUrl}></Image>
                </View>
              </View>
              <View className="left_users">
                <View className="user_text">
                  {creareData?.data?.userName || "--"}
                </View>
                <View className="user_cooperation">合作开启中</View>
                <View className="user_tip">个人博主</View>
                <View className="user_healthy">
                  <Image src={healthy}></Image>
                </View>
              </View>
            </View>
            <View
              className="user_right"
              onClick={(e) => {
                setCreareData({
                  ...creareData,
                  open: false,
                });
              }}
            >
              个人主页 {">"}
            </View>
          </View>
          <View className="blogger_card_content">
            <View className="blogger_card">
              <View className="blogger_card_header">
                <View className="header_title">工作台</View>
                <View className="header_options">查看详情 {">"}</View>
              </View>
              <View className="blogger_card_workbench">
                <View
                  className="workbench_item"
                  style={{ borderRight: "1px solid #eee" }}
                >
                  <View className="item_value">
                    {creareData?.data?.pending}
                  </View>
                  <View className="item_text">待接受</View>
                </View>
                <View
                  className="workbench_item"
                  style={{ borderRight: "1px solid #eee" }}
                >
                  <View className="item_value">
                    {creareData?.data?.inProgress}
                  </View>
                  <View className="item_text">进行中</View>
                </View>
                <View className="workbench_item">
                  <View className="item_value">
                    {" "}
                    {creareData?.data?.completed}
                  </View>
                  <View className="item_text">已完成</View>
                </View>
              </View>
            </View>
            <View className="blogger_card">
              <View className="blogger_card_header">
                <View className="header_title" style={{ display: "flex",alignItems:'center' }}>
                  <View>我的账单</View>
                    <Img
                      src={eye}
                      style={{
                        width: "16px",
                        height: "16px",
                        marginLeft: "2px",
                      }}
                    ></Img>
                </View>
                <View className="header_options">查看详情 {">"}</View>
              </View>
              <View className="blogger_card_bill">
                <View
                  className="bill_item"
                  style={{ borderRight: "1px solid #eee" }}
                >
                  <View className="bill_item_value">
                    ¥ {creareData?.data?.monthlyIncome || 0}.00
                  </View>
                  <View className="bill_item_title">当月现金收入</View>
                </View>
                <View className="bill_item">
                  <View className="bill_item_value">
                    ¥ {creareData?.data?.totalIncome || 0}.00
                  </View>
                  <View className="bill_item_title">总现金收入</View>
                </View>
              </View>
            </View>
            <View className="blogger_card">
              <View className="blogger_card_header">
                <View className="header_title">合作管理</View>
              </View>
              <View className="blogger_card_administration">
                {administrationList?.map((item) => {
                  return (
                    <View className="administration_item">
                      <View className="administration_item_icon">
                        <Image src={item?.icon}></Image>
                      </View>
                      <View className="administration_item_text">
                        {item?.title}
                      </View>
                    </View>
                  );
                })}
              </View>
            </View>
            <View className="blogger_card" style={{ height: "40px" }}></View>
          </View>
        </View>
        <View className="blogger_options">
          <View className="blogger_item">
            <View className="item_Icon">
              <Image src={homePage}></Image>
            </View>
            <View className="item_title">首页</View>
          </View>
          <View className="blogger_item">
            <View className="item_Icon">
              <Image src={management}></Image>
            </View>
            <View className="item_title">经营</View>
          </View>
          <View className="blogger_item">
            <View className="item_Icon">
              <Image src={my}></Image>
            </View>
            <View className="item_title" style={{ color: "#e83f49" }}>
              我的
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}

export default BloggerCollab;
